/**
 * @description  访问统计
 * @author shenhong
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { message, Row, Col } from 'antd';
import { FirstHeaderC, DATA_ENTRY, NoQueryC, AdvancedSearch } from '../../../comps';
import ShowEchartsOne from './showEchatsOne';
import ShowEchartsTwo from './showEchartsTwo';
import ShowEchartsThree from './showEchartsThree';
import ShowEchartsFour from './showEchartsFour';
import LoginTimesTop5 from './LoginTimesTop5'; //机构登录次数top5
import LoginTimesDistribution from './LoginTimesDistribution'; //登录次数分布
import LoginTotalTimesTrend from './LoginTotalTimesTrend'; //登录总次数趋势图

class VisitStatistics extends PureComponent {
  constructor() {
    super();
    this.state = {
      beginDate: undefined,
      endDate: undefined,
      timeStamp: new Date().getTime(),
      tenant: '', //租户
      tenantArr: [],
    };
  }
  componentDidMount() {}

  // 查询
  searchData = (e) => {
    if (e && e.begin1 && e.begin2) {
      this.setState({
        beginDate: e.begin1.format('YYYYMMDD'),
        endDate: e.begin2.format('YYYYMMDD'),
        timeStamp: new Date().getTime(),
        tenant: this.state.tenantArr.length ? this.state.tenantArr.toString() : '',
      });
    } else {
      message.warning('请选择完整的时间区间');
    }
  };

  onTenantChange = (e) => {
    this.setState({
      tenantArr: e ? e.key : [],
    });
  };

  render() {
    const { endDate, beginDate, timeStamp, tenant } = this.state;
    const args = {
      beginDate: beginDate,
      endDate: endDate,
      tenant,
    };
    const searchProps = {
      dataSource: [
        {
          // initialValue:'0',
          selectIndex: 'complextdate1',
          startIndex: 'begin1',
          endIndex: 'begin2',
          title: '时间区间',
          type: DATA_ENTRY.COMPLEXDATE,
          // startOnChange:{},     // 起始时间变化事件
          // endOnChange:{},      // 结束时间变化事件
          // selOnChange:{} ,      // 下拉选择变更事件
          selfDefination: ['0', '1', '2', '3'],
        },
        {
          dataIndex: 'tenant',
          title: '租户',
          multiple: true,
          type: DATA_ENTRY.TENANT,
          onChange: this.onTenantChange,
        },
      ],
      onQuery: (e) => this.searchData(e),
      onClear: () => {
        const { form } = this.props;
        form?.resetFields();
        this.setState({
          tenantArr: [],
        });
      },
    };
    return (
      <div>
        <div>
          <AdvancedSearch {...searchProps} />
        </div>
        {endDate !== undefined && beginDate !== undefined ? (
          <div>
            <div style={{ marginTop: '20px' }}>
              <FirstHeaderC title='访问情况统计' />
            </div>
            <div style={{ marginTop: '10px' }}>
              <Row gutter={16}>
                <Col span={12}>
                  <ShowEchartsOne args={args} timeStamp={timeStamp} />
                </Col>
                <Col span={12}>
                  <ShowEchartsTwo args={args} timeStamp={timeStamp} />
                </Col>
              </Row>
            </div>
            <div style={{ marginTop: '20px' }}>
              <FirstHeaderC title='热点TOP10功能' />
            </div>
            <div style={{ marginTop: '10px' }}>
              <Row gutter={16}>
                <Col span={12}>
                  <ShowEchartsThree args={args} timeStamp={timeStamp} />
                </Col>
                <Col span={12}>
                  <ShowEchartsFour args={args} timeStamp={timeStamp} />
                </Col>
              </Row>
            </div>
            {!tenant ? (
              <div>
                <div style={{ marginTop: '20px' }}>
                  <FirstHeaderC title='登录次数' />
                </div>
                <div style={{ marginTop: '10px' }}>
                  <Row gutter={16}>
                    <Col span={12}>
                      <LoginTimesTop5 args={args} timeStamp={timeStamp} />
                    </Col>
                    <Col span={12}>
                      <LoginTimesDistribution args={args} timeStamp={timeStamp} />
                    </Col>
                  </Row>
                </div>
                <div style={{ marginTop: '20px' }}>
                  <FirstHeaderC title='登录总次数趋势图' />
                </div>
                <div style={{ marginTop: '10px' }}>
                  <LoginTotalTimesTrend args={args} timeStamp={timeStamp} />
                </div>
              </div>
            ) : (
              ''
            )}
          </div>
        ) : (
          <div style={{ marginTop: '10px' }}>
            <NoQueryC />
          </div>
        )}
      </div>
    );
  }
}
export default connect(({}) => ({}))(VisitStatistics);
